Designing is my passion, where no boundaries for creation, we can explore more and create a wonderful UI for a better User experience. I am a detail-oriented UX/UI designer with extensive user-centered experience in creating quality products and services to improve users experience.
PROJECTS
ABOUT
Commerce Platform Portals
Title
Introuction
Carson Inc e-Commerce - Web Application
“Create a platform where users can create and download applications for Carson terminals.” I joined this project in March 2019. There were more than 5 people involved in this project. As a UX and UI designer, I worked with fellow designers to create the end-to-end experience of the product. The other designers focused on designing mockups, and my primary role was to develop flows/wireframes and delivered the wireframe to the team at the beginning of the project. Later, I created not only wireframes but also visual design and design specifications.
1.Produced a consistent and clean design concept 2.Created detail-oriented hi-fi wireframes all use cases which helped all team's work. 3.Delivered all design deliverables on time with a tight schedule to release on time.
My Role
What I most accomplished
I was responsible for creating flows, wireframes, final design mockup and specs to engineers. Developer Portal and Merchant Portal flow/wireframes- collaborated closely with other designers, developers, product manager, and QA team.
There were 2.7 weeks for design team to create flows, wireframes and functional designs for specific small use cases ahead of the each development sprint (3weeks). On each development sprint (3weeks) : Agile Development Process
Design Process
I compared competitors features and made a list of cons, pros, their product design layouts, what competitors using the design theme, and what other industry references and which design system matches more with our targeted users.
In order to determine our web portals concept, I researched about the latest UI/UX trends: Responsive Websites, Large Resolutions, infinite/interactive scrolling against clicking, much more interactive story-based pages incorporating rich images, embedded video, infographics, and personalized content based on user data.
Based on the research, I found out two different type of websites I need to build. The first type of website is an e-commerce type website. Developers meet merchants and transaction such as ordering, payments, downloading, and installing are capable online due to the content management system involved. That’s the second type of website, CMS and dashboard type.
After the product meeting, I sketched out rough flows and wireframes to summarize and plan how we design them. I was involved in the project from ideation to production stage, so I understand the end to end flows. I defined the flows with the team(mostly back-end, front-end developers and a product manager) and I documented it for the team. Once the flows/wireframes confirmed by all team, I started to create hi-fi wireframes.
Competitor Analysis
Research the latest UX/UI trends
Flows and design mockups
Sketch ideas / Create flows / lo-fi wireframes
Research and Planning
Sketch ideas / Create flows / lo-fi wireframes
Design Concept
The design goal was to create single UI and UX frameworks for a consistent experience across all company products. We wanted users to look at our site and know that our service works well and it is worth their time and money. We need to make users feel they had the better choice over our competitors. we created a different design concept and shared our ideas together and presented stakeholders to decide one concept among 12 design proposals. The final decision was a dark and edge UI theme which enhances the company brand's visual and corporate identity.
Design Mood Board
Research Dashboard Design
Hi-Fi wireframes / Final design mockups
In the beginning of this project, we created hi-fi wireframes by Gliffy tool, and once the wireframes finalized, I started designing UI (See example below). It was an overwhelming workload for one resource to finish all design work within four weeks. I discussed with the team and decided to create hi-fi wireframes using visual design mockup (See example B below), and team agreed with my suggestion. I made the wireframes with visual design at the same time. It was a proactive design process decision for me.
There were more than 100 use cases in this project. I couldn't post entire wireframes works here. I posted two significant new challenge design experience for me as the example below.
My Challenges
Solutions
1. It was the first time to design charts for me. 2. Data was complicated, but the data design should be in aesthetically pleasing and functional charts that users can view easily. 3. Which type of charts to use? 4. The specifications of chart design for engineers
1. Use a familiar chart type
I researched various charts/graphs design to choose the right graphs to use for this project. There were several different types of charts and graphs, but some chart types were unique and unfamiliar design. Even us didn't read the chart. I focused on the fact that users shouldn't have to learn how to read the charts that invented. Therefore, I should use the common charts: line chart, table list and the total number of overview cards
2. Document Chart Configurations
When I delivered the wireframes to engineers, there were back-and-forth questions from front-end. To help them, I documented the chart specifications such as background grid visibility, Legend visibility and so on to implement to match design mockup.